<template>

  <div style="background: #f6f7f9; height: 667px;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="立即下单" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
    </van-sticky>
    <van-form @submit="onSubmit" style="text-align: left; margin-top: 10px;">
      <van-cell :label="orderInfo.address" is-link url="/user/address">
        <template #icon>
          <van-icon name="free-postage" size="40" style="padding-right: 10px;"/>
        </template>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="name" style="font-weight: bold;">{{ orderInfo.name }}</span>
          <span class="phone" style="margin-left: 20px;">{{ orderInfo.tel }}</span>
        </template>
      </van-cell>

      <van-field
          readonly
          clickable
          name="picker"
          :value="orderInfo.company"
          label="快递公司"
          placeholder="点击选择快递公司"
          is-link
          @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
          v-model="orderInfo.message"
          name="取件信息"
          label="取件信息"
          placeholder="输入取件信息,取件短信或取件码"
          :rules="[{ required: true, message: '请填写取件信息' }]"
      />
      <van-field
          v-model="orderInfo.remark"
          name="订单备注"
          label="订单备注"
          placeholder="备注信息,如有大件物品请备注"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">立即下单</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "OrderAddNewView",
  data() {
    return {
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,

      orderInfo: {
        name: '张三',
        tel: '157****3512',
        address: '江西省宜春市袁州区宜春学院1栋435',
        company: '',
        message: '',
        remark: '',
      },
    };
  },
  methods: {
    onSubmit() {
      let url = 'http://localhost:9080/orders/create';
      let orderInfo = this.qs.stringify(this.orderInfo, {arrayFormat: 'repeat'});
      console.log('orderInfo = ' + orderInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, orderInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('下单成功!');
          this.$router.push("/order/payment");
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    },
    onConfirm(value) {
      this.orderInfo.company = value;
      this.showPicker = false;
    },
    loadCompany() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/companies';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        let companyName = [];
        for (let i = 0; i < responseBody.length; i++) {
          companyName[i] = responseBody[i].name
        }
        this.columns = companyName;
      })
    },
    setAddress(){
      let addressInfoString = localStorage.getItem('addressInfo');
      let addressInfo = JSON.parse(addressInfoString);
      this.orderInfo = addressInfo;


    }
  },
  mounted() {
    this.loadCompany();
    this.setAddress();
  }
}
</script>

<style scoped>

</style>
